<template>
  <div>
    <el-card>
      <!-- 头部功能区 -->
      <el-row>
        <el-form inline :model="formInline">
          <!-- 新增搜索 -->
          <el-form-item>
            <el-button type="primary" size="mini" @click="showAddForm"
              >新增</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-select
              size="mini"
              v-model="formInline.parentId"
              placeholder="所有一级分类"
              clearable
              @change="handleQuery(true)"
            >
              <el-option
                v-for="item in oneCategory"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              size="mini"
              v-model="formInline.categoryId"
              placeholder="所有二级分类"
              clearable
              no-data-text="请先选择一级分类"
              @change="handleQuery(false)"
            >
              <el-option
                v-for="item in twoCategory"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              size="mini"
              v-model="formInline.templateName"
              placeholder="请输入模板名称,按下回车搜索"
              suffix-icon="el-icon-search"
              @keyup.enter.native="handleQuery(false)"
              clearable
              style="width: 250px"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>

      <!-- 新增弹框 -->
      <el-row>
        <el-dialog title="新增" :visible.sync="addFormVisible">
          <el-form ref="addForm" :model="addForm" :rules="rules">
            <el-form-item
              label="模板名称"
              prop="serviceTemplateName"
              label-width="110px"
            >
              <el-input
                v-model="addForm.serviceTemplateName"
                autocomplete="off"
                placeholder="请输入服务模版名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="服务分类"
              prop="serviceCategoryId"
              label-width="110px"
            >
              <el-select
                size="mini"
                v-model="selectVal1"
                placeholder="一级分类"
                clearable
              >
                <el-option
                  v-for="item in oneCategory"
                  :key="item.categoryId"
                  :label="item.categoryName"
                  :value="item.categoryId"
                ></el-option>
              </el-select>
              <el-select
                v-model="selectVal2"
                style="margin-left: 10px"
                size="mini"
                placeholder="二级分类"
                clearable
                @change="changeSelect"
                no-data-text="请先选择一级分类"
              >
                <el-option
                  v-for="item in addTwoCategory"
                  :key="item.categoryId"
                  :label="item.categoryName"
                  :value="item.categoryId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addServiceTemplate('addForm')"
              >确 定</el-button
            >
            <el-button @click="addFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </el-row>

      <!-- 编辑弹框 -->
      <el-dialog title="编辑" :visible.sync="editFormVisible">
        <el-form ref="editForm" :model="editForm" :rules="rules">
          <el-form-item
            label="模板名称"
            prop="serviceTemplateName"
            label-width="100px"
          >
            <el-input
              v-model="editForm.serviceTemplateName"
              autocomplete="off"
              placeholder="请输入服务模版名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="服务分类"
            prop="serviceCategoryId"
            label-width="110px"
          >
            <el-select
              size="mini"
              v-model="selectVal1"
              placeholder="一级分类"
              clearable
            >
              <el-option
                v-for="item in oneCategory"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              ></el-option>
            </el-select>
            <el-select
              v-model="selectVal2"
              style="margin-left: 10px"
              size="mini"
              placeholder="二级分类"
              clearable
              @change="changeSelect"
            >
              <el-option
                v-for="item in addTwoCategory"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editServiceTemplate('editForm')"
            >确定</el-button
          >
          <el-button @click="editFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 列表 -->
      <el-row>
        <el-table
          :data="tableData"
          style="width: 100%"
          height="calc(100vh - 250px)"
          :cell-style="cellStyle"
          @selection-change="handleSelectionChange"
          @row-click="goInfo"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <!-- <el-table-column
            show-overflow-tooltip="ture"
            prop="serviceTemplateId"
            label="ID"
            sortable
          >
            <template slot-scope="scope">
              <div @click="goInfo(scope.row.serviceTemplateId)">
                {{ scope.row.serviceTemplateId }}
              </div>
            </template>
          </el-table-column> -->
          <el-table-column
            show-overflow-tooltip="ture"
            prop="serviceTemplateName"
            label="模板名称"
            sortable
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip="ture"
            prop="serviceCategoryName"
            label="服务分类"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip="ture"
            prop="processCount"
            label="进程数量"
            sortable
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip="ture"
            prop="count"
            label="已应用模块数"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip="ture"
            prop="updateTime"
            label="修改时间"
            sortable
          >
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                style="margin-right: 10px"
                @click.stop="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click.native.stop="deleteData(scope.row.serviceTemplateId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          :select-data-len="multipleSelection.length"
          @pagination="getListData"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  serviceTemplateList_Api, //服务模版列表查询
  addServiceTemplate_Api, //服务模版新增
  editServiceTemplate_Api, //服务模版编辑
  delServiceTemplate_Api, //服务模版删除
  serviceCategoryList_Api, //服务分类列表查询
  getListByServiceId_Api, //根据父级列id查询子集列表
} from "@/api/configuration/business";
import {
  clearObj, //清空表单的值
} from "@/utils/index.js";
import {
  getCurrent_YMDHMS_Time, //获取当前年月日时分秒
} from "@/utils/common.js";
export default {
  data() {
    return {
      //编辑表单
      editForm: {
        serviceTemplateId: "", //模板ID
        serviceTemplateName: "", //模板名称
        serviceCategoryId: "", //服务分类
        serviceCategoryName: "", //服务分类
      },
      //新增弹框隐藏显示
      addFormVisible: false,
      editFormVisible: false, //控制编辑弹框隐藏显示
      //  新增表单
      addForm: {
        serviceTemplateName: "", //模板名称
        serviceCategoryId: "", //服务分类
        serviceCategoryName: "", //服务分类名称
      },
      // 数据条数
      total: 0,
      //分页数据
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      multipleSelection: [],
      // 查询表单
      formInline: {
        parentId: "", //一级
        categoryId: "", //二级
        templateName: "", //模板名称
      },
      //  表格数据
      tableData: [],
      //表单验证规则
      rules: {
        serviceTemplateName: [
          { required: true, message: "请输入模版名称", trigger: "blur" },
        ],
        serviceCategoryId: [
          { required: true, message: "请选择服务分类", trigger: "blur" },
        ],
      },
      //服务数据分类
      serviceCategoryData: [],
      selectVal1: "", //一级下拉框
      selectVal2: "", //二级下拉框
    };
  },
  methods: {
    //获取列表数据
    getListData(searchVal) {
      let query = { ...this.query };
      //测试
      if (searchVal) query = { ...query, ...this.formInline };
      serviceTemplateList_Api(query).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    //获取服务分类列表数据
    getServiceCategoryData() {
      serviceCategoryList_Api().then((res) => {
        this.serviceCategoryData = res.rows;
      });
    },
    //删除服务模版数据
    deleteData(id) {
      this.$confirm("是否确认删除该服务模板?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delServiceTemplate_Api(id)
            .then((res) => {
              this.getListData(true); //重新拿数据
              this.$message({
                message: "删除成功",
                type: "success",
              });
            })
            .catch((error) => {
              this.$message({
                message: "删除失败",
                type: "error",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //服务模版添加
    addServiceTemplate(formName) {
      //验证表单是否输入正确
      this.addForm.addTime = getCurrent_YMDHMS_Time(); //新增时间
      this.addForm.userId = this.$store.state.user.userId; //添加人
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //正确
          addServiceTemplate_Api(this.addForm)
            .then((res) => {
              this.getListData(); //重新拿数据
              this.addFormVisible = false; //隐藏添加模版弹框
              this.$message.success(res.msg);
            })
            .catch((error) => {});
        } else {
          return false;
        }
      });
    },
    //显示新增弹框
    showAddForm() {
      this.addFormVisible = true;
      //清空
      this.addForm = clearObj(this.addForm);
      this.selectVal1 = "";
      this.selectVal2 = "";
    },
    //服务模版编辑
    editServiceTemplate(formName) {
      this.editForm.updateTime = getCurrent_YMDHMS_Time(); //修改时间
      this.editForm.userId = this.$store.state.user.userId; //修改人
      // this.categoryName =
      //验证表单是否输入正确
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //正确
          editServiceTemplate_Api(this.editForm)
            .then((res) => {
              this.getListData(); //重新拿数据
              this.editFormVisible = false; //隐藏添加模版弹框
              this.$message.success(res.msg);
            })
            .catch((error) => {
              this.$message({
                message: "编辑失败",
                type: "error",
              });
            });
        } else {
          return false;
        }
      });
    },
    //显示编辑弹框
    handleEdit(row) {
      this.editFormVisible = true;
      this.editForm = { ...row };
      this.selectVal2 = this.editForm.serviceCategoryId;
      this.serviceCategoryData.forEach((item) => {
        if (item.categoryId == this.editForm.serviceCategoryId) {
          this.selectVal1 = item.parentId;
        }
      });
    },
    //搜索
    handleQuery(boo = false) {
      if (boo) {
        this.formInline.categoryId = "";
      }
      if (
        this.formInline.parentId ||
        this.formInline.categoryId ||
        this.formInline.templateName
      ) {
        this.getListData(true);
      } else if (this.formInline.templateName == "") {
        this.getListData(true);
      }
    },
    //选择服务分类二级
    changeSelect(val) {
      this.addForm.serviceCategoryId = val;
      this.editForm.serviceCategoryId = val;
      const s1 = this.serviceCategoryData.find(
        (item) => item.categoryId == this.selectVal1
      );
      const s2 = this.serviceCategoryData.find(
        (item) => item.categoryId == this.selectVal2
      );
      console.log(s1, s2);
      //拼接serviceCategoryName服务分类名
      this.addForm.serviceCategoryName =
        s1.categoryName + " / " + s2.categoryName;
      //拼接serviceCategoryName服务分类名
      this.editForm.serviceCategoryName =
        s1.categoryName + " / " + s2.categoryName;
    },
    //表格id样式
    cellStyle({ column, columnIndex }) {
      // 状态列字体颜色
      if (column.ID !== "" && columnIndex === 0) {
        return "color: #46a6ff;cursor:pointer;";
      }
    },
    goInfo(row) {
      this.$router.push({
        path: "Template_Info?serviceId=" + row.serviceTemplateId,
      });
    },
    //查询
    onSubmit() {
      console.log(this.formInline);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    //获取表格数据
    this.getListData();
    //获取服务分类列表数据
    this.getServiceCategoryData();
  },
  computed: {
    //一级分类下拉数据
    oneCategory() {
      return this.serviceCategoryData.filter((item) => !item.parentId);
    },
    //二级分类下拉数据
    twoCategory() {
      //没有选择一级，提示先选择一级
      if (!this.formInline.parentId) {
        return [];
      } else {
        return this.serviceCategoryData.filter(
          (item) => item.parentId == this.formInline.parentId
        );
      }
    },
    //二级分类下拉数据
    addTwoCategory() {
      //没有选择一级，提示先选择一级
      if (!this.selectVal1) {
        return [];
      } else {
        return this.serviceCategoryData.filter(
          (item) => item.parentId == this.selectVal1
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
